<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>接口详情</title>
</head>
<body style="margin:0px;padding:0px;border:0px;">
<div style="width:100%;border-bottom:2px solid #000080;margin:0px;padding:0px;">
    <table style="width:100%;height:50px;">
        <tr>
            <td style="width:50%;text-align:left;padding-left:50px;">
                <image src="open_api.png" style="width:40px;height:40px;margin: 0 auto;vertical-align:middle;"/>
                <span style="font-size:20px;font-weight:bold;padding-left:10px;">API开放平台</span>
            </td>
            <td style="width:50%;text-align:right;font-size:14px;padding-right:10px;">
                <span>登录 | 注册</span>
            </td>
        </tr>
    </table>
</div>
<div id="container" style="width:100%;background:#F5F5F5;border:0px solid blue;padding:0px;margin:0 auto;">
    <div style="width:80%;margin:0 auto;">
        <div style="height:10px;line-height:10px;">
            &nbsp;&nbsp;
        </div>
        <#--遍历map 首选获取key的集合-->
        <#list apiDocumentBeanMapVo?keys as key>
            <div style="width:100%;background:white;border-radius:3px;height:60px;line-height:60px;margin-top:30px;">
                <table style="padding:0px;margin:0 auto;width:100%;">
                    <tr style="width:100%;">
                        <td style="width:80%;border:0px solid red;">
                            <span style="font-size:16px;font-weight:bold;padding-left:20px;">
                                ${apiDocumentBeanMapVo[key].interfaceName}
                            </span>
                            <span style="font-size:14px;padding-left:10px;">
                                ${apiDocumentBeanMapVo[key].interfaceDesc}....
                            </span>
                        </td>
                        <td style="width:20%;border:0px solid red;">
                            <button class="buttonCls" style="font-size:14px;font-weight:bold;border-radius:5px;border-color:#4169E1;cursor:pointer;
                                    background:#4169E1;color:white;height:40px;line-height:35px;width:100px;"
                                    onclick="showApiDetail('${key}')">
                                接口详情
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </#list>

        <!--
        <div style="width:100%;background:white;border-radius:3px;height:60px;line-height:60px;margin-top:30px;">
            <table style="padding:0px;margin:0 auto;width:100%;">
                <tr style="width:100%;">
                    <td style="width:80%;border:0px solid red;">
                        <span style="font-size:16px;font-weight:bold;padding-left:20px;">修改用户信息</span>
                        <span style="font-size:14px;padding-left:10px;">根据用户ID修改用户信息</span>
                    </td>
                    <td style="width:20%;border:0px solid red;">
                        <button class="buttonCls" style="font-size:14px;font-weight:bold;border-radius:5px;border-color:#4169E1;cursor:pointer;
							background:#4169E1;color:white;height:40px;line-height:35px;width:100px;"
                                onclick="showApiDetail(2)">
                            接口详情
                        </button>
                    </td>
                </tr>
            </table>
        </div>

        <div style="width:100%;background:white;border-radius:3px;height:60px;line-height:60px;margin-top:30px;">
            <table style="padding:0px;margin:0 auto;width:100%;">
                <tr style="width:100%;">
                    <td style="width:80%;border:0px solid red;">
                        <span style="font-size:16px;font-weight:bold;padding-left:20px;">商户信息查询</span>
                        <span style="font-size:14px;padding-left:10px;">根据商户ID查询商户信息....</span>
                    </td>
                    <td style="width:20%;border:0px solid red;">
                        <button class="buttonCls" style="font-size:14px;font-weight:bold;border-radius:5px;border-color:#4169E1;cursor:pointer;
							background:#4169E1;color:white;height:40px;line-height:35px;width:100px;"
                                onclick="showApiDetail(3)">
                            接口详情
                        </button>
                    </td>
                </tr>
            </table>
        </div>

        <div style="width:100%;background:white;border-radius:3px;height:60px;line-height:60px;margin-top:30px;">
            <table style="padding:0px;margin: 0 auto;width:100%;">
                <tr style="width:100%;">
                    <td style="width:80%;border:0px solid red;">
                        <span style="font-size:16px;font-weight:bold;padding-left:20px;">测试接口服务1</span>
                        <span style="font-size:14px;padding-left:10px;">测试接口服务1信息....</span>
                    </td>
                    <td style="width:20%;border:0px solid red;">
                        <button class="buttonCls" style="font-size:14px;font-weight:bold;border-radius:5px;border-color:#4169E1;cursor:pointer;
							background:#4169E1;color:white;height:40px;line-height:35px;width:100px;"
                                onclick="showApiDetail(3)">
                            接口详情
                        </button>
                    </td>
                </tr>
            </table>
        </div>
        -->

        <div style="height:80px;line-height:80px;">
            <table style="padding:0px;margin:0 auto;width:100%;">
                <tr style="width:100%;text-align:right;">
                    <td>
                        共 3 条
                    </td>
                    <td style="width:20%;border:0px solid red;width:80px;">
                        <select>
                            <option>
                                10 / 页
                            </option>
                        </select>
                    </td>
                    <td>

                    </td>
                    <td style="width:380px;">
                        <ul style="list-style:none;float:left;">
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;height:30px;line-height:30px;
									width:30px;margin:0 auto;margin-left:10px;border:0px;cursor:pointer;">
                                    《
                                </div>
                            </li>
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;border-radius:5px;border-color:#1E90FF;cursor:pointer;
									background:#1E90FF;color:white;height:30px;line-height:30px;
									width:30px;margin:0 auto;text-align:center;margin-left:15px;">
                                    1
                                </div>
                            </li>
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;height:30px;line-height:30px;
									width:30px;margin:0 auto;margin-left:10px;">
                                    2
                                </div>
                            </li>
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;height:30px;line-height:30px;
									width:30px;margin:0 auto;margin-left:10px;border:0px;">
                                    ....
                                </div>
                            </li>
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;height:30px;line-height:30px;
									width:40px;margin:0 auto;margin-left:10px;">
                                    100
                                </div>
                            </li>
                            <li style="list-style:none;float:left;">
                                <div style="font-size:14px;font-weight:bold;height:30px;line-height:30px;
									width:30px;margin:0 auto;margin-left:10px;border:0px;cursor:pointer;">
                                    》
                                </div>
                            </li>
                        </ul>
                    </td>
                    <td style="width:100px;">
                        前往&nbsp;<input type="text" value="1" style="width:30px;"/>&nbsp;页
                    </td>
                </tr>
            </table>
        </div>

    </div>
</div>
<style>
    .buttonCls:hover {
        background-color: red;
    }
</style>
<script>
    function showApiDetail(apiId) {
        window.location.href = "/getApiDetailInfo?apiId=" + apiId;
    }
</script>
</body>
</html>